<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!--  <button>点击</button>
    <div onclick="fn1(this)">内联事件</div>
    <script>
        // 函数就是做某件事件。
        // 完成事件，需要依赖某个人。某个人做了某件事。
        // 谁做了这个事情，this 就是谁。

        // 1. 全局作用域或者普通函数中 this 指向全局对象 window
        //    定时器是 window 的方法，this 是 window
        console.log(this);

        function fn() {
            console.log(this);
        }
        // fn();
        window.fn();
        window.setTimeout(function () {
            console.log(this);
        }, 1000);

        // 2. 对象的方法中的this指向该对象
        var o = {
            sayHi: function () {
                console.log(this); // this指向的是 o 这个对象
            }
        }
        o.sayHi();

        // 3. 事件处理函数中的this指向事件源（绑定事件元素）
        var btn = document.querySelector('button');
        // btn.onclick = function() {
        //     console.log(this); // this指向的是btn这个按钮对象
        // }
        btn.addEventListener('click', function () {
            console.log(this); // this指向的是btn这个按钮对象
        });

        // 4. 构造函数中this指向构造函数的实例
        function Hero(name) {
            this.name = name; // 构造函数的目的就是创建对象，给当前对象添加属性
            console.log(this); // this指向的是Janna 实例对象
        }
        // 构造函数，new 开辟新的内存空间，创建一个空对象，this指向这个对象
        // Hero（）实例化之后 赋值给janna

        var janna = new Hero('娜迦');

        // 5. 定时器中的this指向全局对象window
        setTimeout(function () {
            // setTimeout定时器中this————>全局对象window
            console.log(this);
            clearInterval(timer)
        }, 5000);
        var timer = setInterval(function () {
            console.log(this);
        }, 1000);

        // 6. 内联事件处理函数的this指向当前的dom节点
        function fn1(n) {
            console.log(n)
        } -->
    </script>
    <script>
        var num = 0;
        function Obj() {
            this.getNum = function () {
                this.num = 1;
                this.getNum = function () {
                    console.log(this.num);
                },
                    this.getNumLater = function () {
                        setTimeout(function () {
                            console.log(this.num);
                        }, 1000)
                    }
            }
            var obj = new Obj;
            obj.getNum();
            obj.getNumLater();
        }
    </script>
</body>

</html>